<template>
  <h5>Son 子组件</h5>
  <p>count 的值是：{{ count }}</p>
  <button @click="add">+1</button>
  <!-- 在模板中，调用内置的 $emit() 函数，
   就可以触发指定的自定义事件了 -->
  <!-- 第一个参数：要触发的自定义事件的名字 -->
  <!-- 第二个参数：要携带的数据 -->
  <button @click="$emit('countChange', ++count, true, 'abc')">触发自定义的 countChange 事件</button>
</template>

<script setup>
import { ref } from 'vue'
// 1. 使用 defineEmits() 声明自定义事件
// const emit = defineEmits(['countChange'])
const emit = defineEmits({
  countChange(value, flag, info) {
    // true 表示校验通过；false 表示校验不通过；
    if (typeof value !== 'number' || isNaN(value)) return false
    if (typeof flag !== 'boolean') return false
    if (!['新闻', '娱乐', '军事'].includes(info)) return false
    return true
  }
})

const count = ref(0)

const add = () => {
  count.value++
  // 触发 countChange 的自定义事件
  emit('countChange', count.value, false, '军事')
}
</script>
